<template>
	<view class="body">
		<div class="back">
			<div class="logo">
				<image src="@/static/logo.png" alt="" />
			</div>
			<view class="form">
				<div class="tab">
					<u-tabs :list="tabList" :scrollable="false" @click="tabClick" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" lineWidth="0" lineHeight="0"></u-tabs>
				</div>
				<div class="formTable">
					<div v-if="tabsData === 'Code Login'">
						<view class="areaCodeCss displayCss">
							<u-button @click="openArea">+{{ areaCodeNumber }}</u-button>
							<u-input type="number" v-model="fromModel.phoneNumber"
								placeholder="please input phone number" style="flex: 1;"
								@input="handlePhoneInput"></u-input>
						</view>
						<view class="sendCode displayCss">
							<u-input v-model="fromModel.sendCode" placeholder="please input verification code"
								style="flex: 1;" @input="handleCodeInput"></u-input>
							<u-button :disabled="isDisabled" @click="sendCode">{{ buttonText }}</u-button>
						</view>
					</div>
					<div v-else>
						<view class="radInput displayCss" style="">
							<u-input v-model="fromModel.account" placeholder="username / phone number / email"
								style="flex: 1;"></u-input>
						</view>
						<view class="radInput paddingTop displayCss" style="">
							<u-input password v-model="fromModel.password" placeholder="please input your password"
								style="flex: 1;"></u-input>
						</view>
					</div>
					<div class="textBtn">
						<span @click="forgetJump(false)">register</span>
						<span class="forget" @click="forgetJump(true)">forget?</span>
					</div>
				</div>
				<div class="logBtn phone">
					<u-button type="" text="Login" @click="phoneLogin"></u-button>
				</div>
				<div class="textBox">
					<span class="head">I have read and agree to {{ textHead }}</span>
					<span class="agreement">{{ textBody }} <span>并授权大漂亮潮玩获取本机号码</span></span>
					<u-checkbox-group placement="column" v-model="checkbox" @change="handChange">
						<u-checkbox name="1" activeColor="#de868f">
						</u-checkbox>
					</u-checkbox-group>
				</div>
			</view>
		</div>
		<u-picker :show="areaCode" :columns="areaCodeColumns" keyName="label" :closeOnClickOverlay="true"
			@confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
// import { login } from '@/api/login'
export default {
	data() {
		return {
			areaCode: false,
			isDisabled: false,
			buttonText: 'send code',
			areaCodeNumber: '86',
			areaCodeColumns: [[
				{ label: '(+86)China', id: '86' },
				{ label: '(+852)Hong Kong,China', id: '852' },
				{ label: '(+853)Macao,China', id: '853' },
			]],
			textHead: '<Terms of Service>',
			textBody: '<Terms of Transactio><Privacy Policy>天翼账号服务与隐私协议 ',
			checkbox: [],
			fromModel: {
				phoneNumber: '',
				sendCode: '',
				account: '',
				password: '',
			},
			tabList: [{
				name: 'Code Login',
			}, {
				name: 'Account Login',
			},],
			tabsData: 'Code Login',
		};
	},
	methods: {
		phoneLogin() {
			if (this.checkbox.length === 0) {
				uni.showToast({
					title: '请先勾选同意隐私协议',
					duration: 2000,
					type: "default",
					icon: "none",
				});
			} else {
				if ((!this.fromModel.phoneNumber || !this.fromModel.sendCode) && this.tabsData === 'Code Login') {
					uni.showToast({
						title: '请输入手机号和验证码',
						duration: 2000,
						type: "default",
						icon: "none",
					});
					return;
				} else if ((!this.fromModel.account || !this.fromModel.password) && this.tabsData === 'Account Login') {
					uni.showToast({
						title: '请输入账号和密码',
						duration: 2000,
						type: "default",
						icon: "none",
					});
					return;
				} else if (this.fromModel.password.length < 6) {
					uni.showToast({
						title: '密码不能小于6位',
						duration: 2000,
						type: "default",
						icon: "none",
					});
					return;
				}
				// login({
				// 	phone: this.fromModel.phoneNumber,
				// 	code: this.fromModel.sendCode,
				// 	account: this.fromModel.account,
				// 	password: this.fromModel.password,
				// }).then((res) => {
				// 	console.log('res', res)
				// })
				uni.showToast({
					title: '登陆成功',
					duration: 2000,
					type: "success",
					icon: "success",
				});
			}
		},
		handChange(n) {

		},
		// 弹出选择的确定
		confirm(e) {
			this.areaCodeNumber = e.value[0].id;
			this.areaCode = false;
		},
		// 弹出选择的取消
		cancel() {
			this.areaCode = false;
		},
		openArea() {
			this.areaCode = true;
		},
		// 发送验证码
		sendCode() {
			if (this.isDisabled) return;
			if (this.fromModel.phoneNumber) {

				this.isDisabled = true;
				this.buttonText = '30s';
				this.countdown = 30;
				const intervalId = setInterval(() => {
					if (this.countdown <= 0) {
						clearInterval(intervalId); // 清除定时器
						this.isDisabled = false;
						this.buttonText = 'send code';
					} else {
						this.countdown -= 1;
						this.buttonText = `${this.countdown}s`;
					}
				}, 1000);
				uni.showToast({
					title: '验证码已发送',
					duration: 2000,
					type: "default",
					icon: "none",
				});
			} else {
				uni.showToast({
					title: '请输入手机号',
					duration: 2000,
					type: "default",
					icon: "none",
				});
			}
		},
		handlePhoneInput(value) {
			if (value) {
				this.fromModel.phoneNumber = this.fromModel.phoneNumber.replace(/[^0-9]/g, '')
			}
		},
		handleCodeInput(value) {
			if (value) {
				this.fromModel.sendCode = this.fromModel.sendCode.replace(/[^0-9]/g, '')
			}
		},
		forgetJump(data) {
			uni.navigateTo({
				url: `/pages/login/resetPassword?forget=${data}`,
			})
		},
		tabClick(item) {
			this.tabsData = item.name
			if (item.name === 'Code Login') {
				this.fromModel.account = ''
				this.fromModel.password = ''
			} else {
				this.fromModel.phoneNumber = ''
				this.fromModel.sendCode = ''
			}
		},
	},
}
</script>

<style lang="scss">
.body {
	width: 100%;
	height: 100vh;
	position: relative;

	.form {
		.tab {
			width: 90%;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}

		.formTable {
			.displayCss {
				display: flex;
				align-items: center;
			}

			margin-top: 40rpx;
			width: 85%;
			margin: 0 auto;



			.areaCodeCss {
				margin-bottom: 40rpx;

				.u-button {
					width: 120rpx;
					padding: 0;
					border-radius: 20px 0 0 20px;
				}

				.u-input {
					background: #f2f2f2;
					border-radius: 0 15px 15px 0;
				}
			}

			.sendCode {
				.u-button {
					width: 160rpx;
					padding: 0;
					border-radius: 0 20px 20px 0;
				}

				.u-input {
					background: #f2f2f2;
					border-radius: 15px 0 0 15px;
				}
			}

			.radInput {
				.u-input {
					background: #f2f2f2;
					border-radius: 15px;
				}
			}

			.paddingTop {
				padding-top: 40rpx;
			}

			.textBtn {
				margin-top: 24rpx;
				font-size: 14px;

				.forget {
					float: right;
				}
			}
		}

		.logBtn {
			margin: 0 auto;
			margin-top: 24rpx;
			width: 85%;
			text-align: center;

			.u-button {
				color: #fff;
				height: 100rpx;
				font-weight: 600;
				border-radius: 10px;
				background-color: #de868f;
				border: 1px solid #bbbbbb;
			}

		}
	}

	.textBox {
		margin-top: 30rpx;
		text-align: center;
		font-size: 24rpx;
		position: relative;

		.head {
			color: #636363;
		}

		.agreement {
			width: 70%;
			// margin: 0 auto;

			span {
				color: #bebebe;
				display: inline;
			}
		}

		span {
			display: inline-block;
		}

		.u-checkbox {
			position: absolute;
			left: 0;
			bottom: 37%;
			left: 8%;
		}
	}

	.logo {
		text-align: center;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.back {
		width: 100%;
		position: fixed;
		top: 10%;
	}
}
</style>
